<template>
  <div class="general">
    <TopNav />
    <div class="block">
      <div class="date">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="(value) => changeHandler(value)"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
    </div>
    <div class="list" :style="{height:clientHeight+'px'}">
      <h3>整体概况</h3>
      <div class="list_car">
        <el-card class="box-card" v-for="(item,index) in carlist" :key="index">
          <h1>
            {{item.num}}
            <span>{{item.unit}}</span>
          </h1>
          <p>{{item.name}}</p>
        </el-card>
      </div>
    </div>
  </div>
</template>
<style>
.general .list_car::after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  clear: both;
}

.general .box-card .el-card__body {
  padding: 0;
  padding: 23px 0 0 44px;
}

.general .box-card .el-card__body h1 {
  text-align: left;
  padding: 0;
  font-size: 40px;
  font-weight: bold;
  color: #111111;
  line-height: inherit;
  text-shadow: none;
}

.general .box-card .el-card__body h1 span {
  font-size: 18px;
}

.general .box-card .el-card__body p {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  color: #111111;
  line-height: inherit;
  text-shadow: none;
}

.general .el-card {
  width: 294px;
  height: 138px;
  float: left;
  background: url(../assets/img/grade.png) no-repeat;
  margin-right: 32px;
}

.general .el-card:nth-child(2) {
  background: url(../assets/img/class.png) no-repeat;
}

.general .el-card:nth-child(3) {
  background: url(../assets/img/discipline.png) no-repeat;
}

.general .el-card:nth-child(4) {
  background: url(../assets/img/teacher.png) no-repeat;
}

.general .el-card:nth-child(5) {
  background: url(../assets/img/student.png) no-repeat;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
  border: 0;
}

.general .date {
  display: none;
}

.general .block {
  padding: 5px;
}
</style>
<script>
import TopNav from './TopNav.vue'
export default {
  name: 'index',
  components: {
    TopNav,
  },
  data() {
    return {
      value1: '',
      clientHeight: 0,
      carlist: [
        {
          num: '1',
          unit: '个',
          name: '年级数量',
        },
        {
          num: '1',
          unit: '个',
          name: '班级数量',
        },
        {
          num: '1',
          unit: '个',
          name: '学科数量',
        },
        {
          num: '1',
          unit: '个',
          name: '老师数量',
        },
        {
          num: '1',
          unit: '个',
          name: '学生数量',
        },
      ],
    }
  },
  mounted() {
    console.log(document.body.clientHeight)
    this.clientHeight = document.body.clientHeight - 120 - 64
    console.log()
    let token = sessionStorage.getItem('token')
    let carlist = this.carlist
    var self = this
    this.axios({
      method: 'post',
      data: {
        token: token,
      },
      url: this.$api + '/index/index/survey',
    }).then(function (res) {
      if (res.data.code == 401) {
        self.$message({
          message: '请登录后再操作！',
        })
        self.$router.push({
          name: 'login',
        })
      }
      carlist[0].num = res.data.data.niannum
      carlist[1].num = res.data.data.bannum
      carlist[2].num = res.data.data.classnum
      carlist[3].num = res.data.data.usernum
      carlist[4].num = res.data.data.studentnum
    })
  },
}
</script>
